<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="res/ui-lightness/jquery-ui-1.8.20.custom.css" />
<link rel="stylesheet" type="text/css" href="res/main.css" />
<title>2ME107: Assignment #3, Christian Knapp &amp; Sebastian Hönel</title>
</head>

<body>

  <header>
    <div id="userdetails">
      <img alt="Avatar" id="avatar" />
      <h1 id="username">RealUsername (UserName)</h1>
      <nav><a href="#" id="userlink">http://www.last.fm/user/JD</a></nav>
      <p><a id="switch-user">Change user</a></p>
    </div>
    
    <form id="form-logon">
      <input type="text" id="name" name="name" placeholder="Type in your Last.fm Username" />
      <input type="submit" id="submit" value="Use name!" />
    </form>
  </header>
  
  <section id="controls">
    <form id="form-controls">
      <div id="slider-wrapper">
        <div id="radius-slider"></div>
        <input type="text" value="100 km" id="radius-slider-value" />
        <select size="1" id="distance-importance">
          <option value="1">Distance is very important!</option>
          <option value=".75">Would be nice, if near.</option>
          <option value=".5">Other settings are important as well.</option>
          <option value=".25">I consider the event itself more important.</option>
          <option value="0">I don't care at all about the distance.</option>
        </select>
        <input type="datetime" name="minimum-date" id="minimum-date" placeholder="Minimum start datetime">
        <input type="datetime" name="maximum-date" id="maximum-date" placeholder="Maximum start datetime">
      </div>
      <input type="submit" id="fetch-results" value="Get &amp; filter results!" />
    </form>
    <div id="progress-wrapper">
      <progress id="fetch-progress" max="1" value="0"></progress>
      <p id="progress-status"><span id="progress-status-percent"></span> <span id="progress-status-text"></span></p>
    </div>
    
  </section>

  <section>
    <div id="map"></div>
  </section>
  
  <section id="results"></section>

  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script type="text/javascript" charset="utf-8" src="res/jquery.cookie.min.js"></script>
  <script type="text/javascript" charset="utf-8" src="res/jquery-ui-1.8.20.custom.min.js"></script>
  <script type="text/javascript" charset="utf-8" src="res/main.js"></script>
  
</body>
</html>
